import styled, { css } from 'styled-components';
import type { IStyledButtonProps } from './Button.types';
import { COLORS, DIMENSION, DEFAULT_DIMENSION, ROUND } from './Button.constants';

/**
 * Преобразует цвет в формате HEX в формат RGBA.
 * @param {string} hex - цвет в формате HEX.
 * @param {number} alpha - прозрачность (значение от 0 до 1)
 * @returns {string} - цвет в формате RGBA
 */
function hexToRgba(hex: string, alpha: number): string {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}

/**
 * Стилизованный компонент кнопки
 * @param {IStyledButtonProps} props - параметры компонента
 * @returns {JSX.Element} - элемент стилизованной кнопки
 */
export const StyledButton = styled.button<IStyledButtonProps>`
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  padding: 0;
  justify-content: center;
  width: ${props => DIMENSION[props.dimension]?.width || DEFAULT_DIMENSION.width};
  height: ${props => DIMENSION[props.dimension]?.height || DEFAULT_DIMENSION.height};
  border-radius: ${props => (props.round ? ROUND.lg : ROUND.sm)};
  border-color: ${props => props.variant !== 'link' && COLORS[props.variant]};
  border-width: 1px;

  ${props =>
    !props.outline &&
    css`
      background-color: ${COLORS[props.variant]};
      color: ${'#FFF'};
    `
  };

  ${props =>
    props.outline &&
    css`
      color: ${COLORS[props.variant]};
    `
  };

  &:hover {
    ${props =>
    props.outline &&
    css`
        cursor: pointer;
        background-color: ${COLORS[props.variant]};
        color: ${props.variant !== 'link' && '#FFF'};
      `}

    path {
      fill: ${props => (props.variant === 'link' ? COLORS.primary : '#FFF')};
    }

    ${props =>
    props.round &&
    !props.outline &&
    css`
        cursor: pointer;
        filter: brightness(85%);
      `}
  };

  &:active {
    ${props =>
    props.round &&
    !props.outline &&
    css`
        filter: brightness(80%);
      `}
  };

  &:focus {
    outline: none;
    box-shadow: 0 0 3px 2px
      ${props =>
    hexToRgba(
      props.variant === 'link' ? '#CFCFCF' : COLORS[props.variant],
      0.5,
    )};
  };

  &:disabled {
    ${css`
      filter: opacity(50%);
      pointer-events: none;
    `}
  };

  background-color: ${props =>
    props.outline ? '#FFF' : COLORS[props.variant]};

  ${props =>
    props.variant === 'link' &&
    !props.outline &&
    css`
      background-color: '#FFF';
      color: ${COLORS.primary};
      border-color: ${'#FFF'};
    `
  };

  ${props =>
    props.variant === 'link' &&
    props.outline &&
    css`
      border-color: ${COLORS.primary};
      color: ${COLORS.primary};
    `
  };
`;
